<template>
    <div>    
        <h1>{{x}}</h1>
        <MySchool/>
        <!-- <MyStudent ref="student"/> -->
        <!-- 原生dom事件写在组件上被当成了自定义事件 -->
        <!-- <MyStudent ref="student" @click="show"/> -->
        <!-- 用native修饰符来定义成原生dom事件 -->
        <MyStudent ref="student" @click.native="show"/>
    </div>
</template>

<script>
    import MySchool from "./components/MySchool"
    import MyStudent from "./components/MyStudent"
    export default {
        name:"App",
        components:{
            MySchool,
            MyStudent
        },
        data(){
            return {
                x:1,
                y:2,
            }
        },
        methods:{
            //用...a接受后面的参数成1个数组
            studentClick(name,...params){
                console.log('student clicked',name,params)
                this.x++
            },
            studentClick2(name,...params){
                console.log('student clicked',name,params)
                this.x++
            },
            show(){
                alert(123)
            }
        },
        mounted() {
            // 绑定自定义事件回调函数要么写在methods中，要么写在箭头函数中，写成function的话，this指向会指向子vc
            // 这里的this是app的vc
            // 推荐写法
            this.$refs.student.$on('studentClick', this.studentClick)
            // this.$refs.student.$on('studentClick2', this.studentClick2)
            // 直接写function则this是student的子vc
            // this.$refs.student.$on('studentClick2', function(name,...params){
            //     // 这里的this是student的子vc
            //     console.log(this)
            //     console.log('student clicked',name,params)
            //     // 因此x++就无效
            //     this.x++
            // })
            // 写成箭头函数，箭头函数没有自己的this，则this向外一级找，则是app的vc
            this.$refs.student.$on('studentClick2', (name,...params) => {
                // 这里的this是student的vc
                console.log(this)
                console.log('student clicked',name,params)
                // 因此x++就无效
                this.x++
            })
        },
    }
</script>
